<html lang="zh-CN"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Blog Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="http://v3.bootcss.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/pc/cmgd.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="http://v3.bootcss.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="http://v3.bootcss.com/assets/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="/static/admin/js/layer/layer.js"></script>
    <script src="/static/admin/js/laypage/laypage.js"></script>
    <script src="/static/admin/js/laytpl/laytpl.js"></script>
    <link href="/static/admin/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <style>
        .article_right {
            float: right;
            width:90%;
            padding-left: 40px;
            border-left: 1px solid #efefef;
        }

        .profile_all img {
            float: left;
            width: 80px;
            height: 80px;
            -webkit-border-radius: 40px;
            border-radius: 40px;
        }

        .profile_info {
            margin-left:90px;
            width: 200px;
            padding-top: 8px;
        }

        .data_all {
            width: 100%;;
            height: 77px;
            border: 1px solid #efefef;
            margin: 30px 0;
            padding: 18px 0;
        }

        .data_acticle {
            float: left;
            width: 50%;
            height: 100%;
            border-right: 1px solid #efefef;
            margin: 0 auto;
            text-align: center;
        }

        .data_read {
            margin: 0 auto 0 50%;
            text-align: center;
            width: 50%;
            height: 100%;
        }
        #ff{font-size:24px;font-weight: 600;}

        .media{border-bottom:1px #f0f0f0 solid; padding: 15px 0;margin-top: 0px; }
        .cat{ text-decoration: none;}

        .media-heading{height: 38px; overflow: hidden; font-family: Microsoft YaHei; font-size:18px;font-weight: 500;color:#000; }
        .media-content {height:40px;overflow: hidden;color: #878787;}
        .media-time{margin-top: 32px;color: #878787;}
        .fa-bookmark-o{color:#fdd000;margin-right: 10px;}
        .article_right{padding-left: 20px; width: 280px;}

    </style>
</head>

<body>

{include file="public/header1" /}

<div class="container">
    <div class="blog-header" style="padding-top: 20px;padding-bottom: 10px;">
        <nav>
            <ul class="pager">
                <!--<li><a href="#">分类1</a></li>-->
                <!--<li><a href="#">分类2</a></li>-->
            </ul>
        </nav>
    </div>

    <div class="row">
        <div class="col-sm-9 blog-main">
            <script id="list-template" type="text/html">
                {{# for(var i=0;i<d.length;i++){  }}
                <div class="media">
                    <div class="media-left">
                        <a href='/mobile/article/index/id/{{d[i].id}}.html'>
                            <img class="media-object"  alt="" src="/uploads/images/{{d[i].photo}}" data-holder-rendered="true" style="width: 225px; height: 150px;">
                        </a>
                    </div>

                    <div class="media-body">
                        <h3 class="media-heading">{{d[i].title}}</h3>
                        <div class="media-content" style="height:48px;overflow: hidden;"><small>{{d[i].remark}}</small></div>
                        <div class="media-time">
                            <small>
                                <span class="media-time-low">{{d[i].create_time}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <i class="fa fa-comment-o"></i>
                                <span  class="media-time-low">{{d[i].comment_count}}</span>
                                <i class="fa fa-thumbs-o-up"></i>
                                <span class="media-time-low">{{d[i].zan_count}}</span>
                                <i class="fa fa-heart-o "></i>
                                <span class="media-time-low">{{d[i].collect_count}}</span>
                            </small>
                        </div>
                    </div>
                </div>

                {{# } }}
            </script>

            <div id="list-content"></div>
            <div id="AjaxPage" style=" text-align: right; margin-top: 30px;"></div>
            <div id="allpage" style=" text-align: right;"></div>
        </div><!-- /.blog-main -->

        <div class="col-sm-3 blog-sidebar">

            <div class="article_right" >
                <div class="profile_all"><img src="/uploads/face/{$user_info.head_img}">
                    <div class="profile_info" style="width: 205px;">
                        <div class="profile_title">
                            <p id="ff">{$user_info.nickname}</p>
                        </div>
                        <div class="profile_content">
                            <div>{$user_info.desc}</div>
                        </div>
                    </div>
                </div>
                <div class="data_all" style="width: 288px;">
                    <div class="data_acticle">
                        <p>{$user_info.count}</p>
                        <p>文章数</p>
                    </div>
                    <div class="data_read">
                        <p>{$user_info.fans_count}</p>
                        <p>粉丝数</p>
                    </div>
                </div>

            </div>


        </div><!-- /.blog-sidebar -->

    </div><!-- /.row -->

</div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://v3.bootcss.com/assets/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">






    Ajaxpage();


    function Ajaxpage(curr){
        $.post('{:url("user/center")}', {page: curr || 1,}, function(data){
            //  $(".spiner-example").css('display','none'); //数据加载完关闭动画
            console.log(data);
            if(data==''){
                // $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
            }else{

                var tpl = document.getElementById('list-template').innerHTML;
                laytpl(tpl).render(data.list, function(html){
                    console.log(data.list);
                    // document.getElementById('list-content').innerHTML = html;
                    $('#list-content').html(html);
                    // $('.weui-grid__icon').css('height',$('.weui-grid__icon').css('width'));
                    laypage({
                        cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象，jquery对象,
                        pages:'{$allpage}',//总页数
                        skip: true,//是否开启跳页
                        skin: '#1AB5B7',//分页组件颜色
                        curr: curr || 1,
                        groups: 3,//连续显示分页数
                        jump: function(obj, first){


                            console.log(obj.curr);

                            if(!first){
                                Ajaxpage(obj.curr)
                            }
                          //  $('#allpage').html('第'+ obj.curr +'页，共'+ obj.pages +'页');
                        }
                    });
                });
            }
        });
    }

</script>

</body></html>